<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			*{
				margin:0;
				padding:0;
			}
			div{
				width:50px;
				height:50px;
				margin:10px 0px;
				
			}
			#div1{
				
				background: red;
				position:relative;

				left:0px;
				transition:all 1s linear;
			}
			#div2{
				position:relative;
				
				left:0px;
				background: blue;
				transition:all 1s ease;
			}
			#div3{
				position:relative;
				
				left:0px;
				background: green;
				transition: all 1s ease-in;
			}
			#div4{
				position:relative;
				
				left:0px;
				background: purple;
				transition: all 1s ease-in-out;
			}
			body{
				height:300px;
				border:1px solid red;
			}
			body:hover #div1{
				left:600px;
			}
			body:hover #div2{
				left:600px;
			}
			body:hover #div3{
				left:600px;
			}
			body:hover #div4{
				left:600px;
			}
		</style>
	</head>
	<body>
		<div id="div1"></div>
		<div id="div2"></div>
		<div id="div3"></div>
		<div id="div4"></div>
	</body>
</html>
